<template>
  <div class="card w-100% h-100% flex justify-between">
    <el-card class="w-30% h-90%" shadow="never">
      <template #header>
        <div class="flex justify-between">
          <span>组织信息</span>
          <el-button v-auth="'departmentAdd'" @click="AddDepartment" size="small" type="success" :icon="Plus" />
        </div>
      </template>
      <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
      <el-tree
        ref="treeRef"
        :data="TreeData"
        :filter-node-method="filterNode"
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :props="defaultProps"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node" @click="search(data)">
            <span>
              <el-link type="primary" @click.stop="info(data)">{{ node.label }}</el-link>
            </span>
            <span>
              <el-link v-auth="'departmentAdd'" type="success" @click.stop="append(data)">添加</el-link>
              <el-link v-auth="'departmentEdit'" class="ml-2" type="primary" @click.stop="edit(data)">编辑</el-link>
              <el-link v-auth="'departmentDelete'" class="ml-2" type="error" @click.stop="remove(data)">删除</el-link>
            </span>
          </span>
        </template>
      </el-tree>
    </el-card>
    <el-card class="w-69% h-90%" shadow="never">
      <template #header>
        <div class="flex justify-center">
          <span>{{ currentDepartment ? currentDepartment.departmentName : "点击组织树可按组织筛选" }}</span>
        </div>
      </template>
      <userSearch :current-department="currentDepartment ? currentDepartment.id : null" ref="userSearchRef"></userSearch>
    </el-card>
    <!-- 新增或修改 -->
    <editDepartment ref="editDepartmentRef" :id="id" @confirm="departmentTree"></editDepartment>
    <!-- 组织详情 -->
    <DepartmentInfo ref="DepartmentInfoRef"></DepartmentInfo>
  </div>
</template>
<script setup>
defineOptions({
  name: 'department',
});
import { getDepartmentTree, deleteDepartment } from "@/api/modules/department";
import { ref, onMounted, watch } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import DepartmentInfo from "@/components/DepartmentInfo/index.vue";
import userSearch from "./user.vue";
import editDepartment from "./editDepartment.vue";
const TreeData = ref(null);
const filterText = ref("");
const defaultProps = {
  children: "children",
  label: "departmentName"
};
/**
 * 添加组织
 */
const editDepartmentRef = ref(null);
const id = ref("");
const AddDepartment = () => {
  id.value = "";
  editDepartmentRef.value.openDialog();
};
/**
 * 添加下级组织
 */
const append = data => {
  id.value = data.id;
  editDepartmentRef.value.openDialog();
};
/**
 * 编辑组织
 */
const edit = data => {
  editDepartmentRef.value.openDialog(data.id);
};
/**
删除组织
 */
const remove = data => {
  //确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    if (data.children && data.children.length > 0) {
      ElMessage.error("有下级组织，不可删除");
      return;
    }
    deleteDepartment(data.id).then(res => {
      if (res.code === 200) {
        departmentTree();
        ElMessage.success("删除成功！");
      }
    });
  });
};
//展示组织详情
const DepartmentInfoRef = ref(null);
const info = data => {
  DepartmentInfoRef.value.openDialog(data.id);
};
/**
 * 获取组织树
 */
const departmentTree = () => {
  getDepartmentTree().then(res => {
    TreeData.value = res.data;
  });
};
/**
 * 组织树筛选
 */
const treeRef = ref(null);
const filterNode = (value, data) => {
  if (!value) return true;
  return data.departmentName.includes(value);
};
/**
 * 按组织操作用户
 */
const userSearchRef = ref(null);
const currentDepartment = ref(null);
const search = data => {
  currentDepartment.value = data;
  userSearchRef.value.search(data.id);
};
watch(filterText, val => {
  treeRef.value.filter(val);
});
onMounted(() => {
  departmentTree();
});
</script>
<style scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
